<template>
  <div>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div class="main">
        <el-form
          label-position="right"
          label-width="120px"
          :model="formLabelAlign"
        >
          <el-form-item label="班级">
            <el-select v-model="formLabelAlign.class" placeholder="请选择班级">
              <el-option
                :label="item.className"
                :value="item.className"
                v-for="(item, index) in classList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="formLabelAlign.studentId"></el-input>
          </el-form-item>
          <el-form-item label="1000m结果">
            <el-input v-model="formLabelAlign.longRunResult"></el-input>
          </el-form-item>
          <el-form-item label="肺活量结果">
            <el-input v-model="formLabelAlign.pulmonaryResult"></el-input>
          </el-form-item>
          <el-form-item label="坐位体前屈结果">
            <el-input v-model="formLabelAlign.bodyResult"></el-input>
          </el-form-item>
          <el-form-item label="50m结果">
            <el-input v-model="formLabelAlign.shortRunResult"></el-input>
          </el-form-item>
          <el-form-item label="立定跳远结果">
            <el-input v-model="formLabelAlign.jumpResult"></el-input>
          </el-form-item>
          <el-form-item label="仰卧起坐结果">
            <el-input v-model="formLabelAlign.situpResult"></el-input>
          </el-form-item>
        </el-form>
        <el-form
          label-position="right"
          label-width="120px"
          :model="formLabelAlign"
        >
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="1000m成绩" style="margin-top: 86px">
            <el-input v-model="formLabelAlign.longRunScore"></el-input>
          </el-form-item>
          <el-form-item label="肺活量成绩">
            <el-input v-model="formLabelAlign.pulmonaryScore"></el-input>
          </el-form-item>
          <el-form-item label="坐位体前屈成绩">
            <el-input v-model="formLabelAlign.bodyScore"></el-input>
          </el-form-item>
          <el-form-item label="50m成绩">
            <el-input v-model="formLabelAlign.shortRunScore"></el-input>
          </el-form-item>
          <el-form-item label="立定跳远成绩">
            <el-input v-model="formLabelAlign.jumpScore"></el-input>
          </el-form-item>
          <el-form-item label="仰卧起坐成绩">
            <el-input v-model="formLabelAlign.situpScore"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      formLabelAlign: {
        class: "",
        name: "",
        studentId: "",
        longRunResult: "",
        longRunScore: "",
        pulmonaryResult: "",
        pulmonaryScore: "",
        bodyResult: "",
        bodyScore: "",
        shortRunResult: "",
        shortRunScore: "",
        jumpResult: "",
        jumpScore: "",
        situpResult: "",
        situpScore: "",
      },
      classList: [],
    };
  },
  computed: {
    ...mapState({}),
  },
  watch: {},
  beforeDestroy() {},
  created() {
    this.selectClass();
  },
  methods: {
    selectClass() {
      axios.post("/api/user/select_classData", {}).then((res) => {
        this.classList = res.data;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$message({
        type: "warning",
        message: "已取消新增",
      });
    },
    openDialog() {
      this.dialogVisible = true;
    },
    submit() {
      //console.log(this.formLabelAlign);
      this.submitForm();

      this.dialogVisible = false;
      // location.reload();
      this.$emit("addData", "");
    },
    submitForm() {
      console.log("cccc");
      let class1 = this.formLabelAlign.class;
      let name = this.formLabelAlign.name;
      let studentId = this.formLabelAlign.studentId;
      let password = "123456";
      let score =
        Number(this.formLabelAlign.longRunScore) +
        Number(this.formLabelAlign.pulmonaryScore) +
        Number(this.formLabelAlign.bodyScore) +
        Number(this.formLabelAlign.shortRunScore) +
        Number(this.formLabelAlign.jumpScore) +
        Number(this.formLabelAlign.situpScore);
      console.log(class1, score);
      axios
        .post("/api/user/register", {
          studentId,
          name,
          password,
          class1,
          score,
        })
        .then((res) => {
          console.log(res.data.msg);
          // alert(res.data.msg);
          if (res.data.msg === "注册成功") {
            this.submitFormrecord();
            this.$message({
              type: "success",
              message: "添加成功",
            });
          } else {
            this.$message({
              type: "warning",
              message: "学生已存在",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitFormrecord() {
      console.log("dddd");
      let studentId = this.formLabelAlign.studentId;
      let banji = this.formLabelAlign.class;
      let type = "1000米长跑";
      let class1 = this.formLabelAlign.longRunResult;
      let name = this.formLabelAlign.longRunScore;

      let type1 = "肺活量";
      let class11 = this.formLabelAlign.pulmonaryResult;
      let name1 = this.formLabelAlign.pulmonaryScore;

      let type2 = "坐位体前屈";
      let class12 = this.formLabelAlign.bodyResult;
      let name2 = this.formLabelAlign.bodyScore;

      let type3 = "50米短跑";
      let class13 = this.formLabelAlign.shortRunResult;
      let name3 = this.formLabelAlign.shortRunScore;

      let type4 = "立定跳远";
      let class14 = this.formLabelAlign.jumpResult;
      let name4 = this.formLabelAlign.jumpScore;

      let type5 = "仰卧起坐";
      let class15 = this.formLabelAlign.situpResult;
      let name5 = this.formLabelAlign.situpScore;

      console.log(studentId);
      axios
        .post("/api/user/change_sturecord", {
          studentId,
          banji,
          type,
          class1,
          name,
          type1,
          class11,
          name1,
          type2,
          class12,
          name2,
          type3,
          class13,
          name3,
          type4,
          class14,
          name4,
          type5,
          class15,
          name5,
        })
        .then((res) => {
          console.log(res.data.msg);
          // alert(res.data.msg);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  position: static !important;
}
/deep/ .el-dialog {
  .el-dialog__header {
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    padding-bottom: 20px;
    background: #0f2d43 !important;
  }
  .el-dialog__footer {
    padding-right: 40px;
    background: #0f2d43;
  }
  .el-form-item__label {
    color: #ffffff;
  }
  .el-input__inner {
    background: #0355a4 !important;
    border: none;
    color: #ffffff;
  }
  .el-select {
    margin: 0 !important;
    .el-input {
      margin: 0 !important;
      color: #ffffff !important;
    }
  }
}
.main {
  display: flex;
}
</style>